<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jq svg</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jq.svg/jquery.svg.pack.js"></script>
<script type="text/javascript" src="jq.svg/jquery.svgdom.pack.js"></script>
<script type="text/javascript" src="jq.svg/jquery.svganim.pack.js"></script>
<script type="text/javascript">
// this file can't be access as local file in chrome, use http://127.0.0.1:8080/nest_svg.html
// instead
var jQ = jQuery;
jQ(function() {
    var svg = jQ("#cont").svg().svg("get");
    svg.configure({"width": "600px", "height": "480px"});
    // ref
    // http://forum.jquery.com/topic/using-svg-to-create-a-grid-using-load-for-external-svg-files
    $.get('tile01.svg', null, function(data) {
        svg.add(data.documentElement);
        svg.change($('svg', svg.root())[0], {
            "x": "400px"
        });
    }, 'xml');
    $.get('tile02.svg', null, function(data) {
        svg.add(data.documentElement);
    }, 'xml');
        
    $("#rotate").click(function() {
        $('svg>g', svg.root()).each(function() {
            svg.change(this, {transform: "rotate(90,50,50)"});
        });
    });
});
</script>
</head>
<body>
    <div id="cont"></div>
    <input type="button" id="rotate" value="rotate" />
</body>
</html>

